<template>
  <div class="page">
		<van-nav-bar
			:fixed="true" 
			:placeholder="true"
			:border="false"
			:title="title"
			left-arrow
			@click-left="$router.goBack()"
		></van-nav-bar>
		<div class="content">
			<van-tabs v-model="active" sticky offset-top="46px">
				<van-tab v-for="index in tab_list" :title="index" :key="index">
					<div class="banner">
						<van-swipe class="swipe" :autoplay="30000" indicator-color="white">
							<van-swipe-item class="s_item">
								<img src="../assets/images/banner.png" alt="">
							</van-swipe-item>
							<van-swipe-item class="s_item">
								<img src="../assets/images/banner.png" alt="">
							</van-swipe-item>
						</van-swipe>
						<div class="nav_bg"></div>
					</div>
					<div class="comm_content">
						<ul>
							<li v-for="(item, index) in comm_list" :key="index">
								<div class="t">
									<img :src="require('../assets/images/' + item.img)" alt="">
								</div>
								<div class="b">
									<div class="title">{{item.title}}</div>
									<div class="mess">
										<div class="price">
											<span class="price">¥ {{item.price}}</span>
											<del>¥ {{item.o_price}}</del>
										</div>
										<div class="btn">
											<button>抢购</button>
										</div>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</van-tab>
			</van-tabs>
		</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
			title: '今日比拼',
			active: 0,
			tab_list: ['全部', '女装裤子', '女神包包', '智能设备', '运动健身', '美容瘦身', '养生调理'],
			comm_list: [
				{
					id: 1,
					title: '最新款女神必备长裤粉色潮流时尚可爱款式',
					img: 'img1.png',
					tag: '华侨城服装大厦',
					price: 299,
					o_price: 368,
					sold: 356
				},
				{
					id: 2,
					title: '女神单肩包迷你款可爱萌娃款式',
					img: 'img2.png',
					tag: 'IN CHINE国际大厦',
					price: 299,
					o_price: 368,
					sold: 356
				},
				{
					id: 3,
					title: '女神单肩包迷你款可爱萌娃款式',
					img: 'img3.png',
					tag: 'IN CHINE国际大厦',
					price: 186,
					o_price: 368,
					sold: 356
				},
				{
					id: 4,
					title: '女神单肩包迷你款可爱萌娃款式',
					img: 'img1.png',
					tag: 'IN CHINE国际大厦',
					price: 279,
					o_price: 368,
					sold: 356
				},
				{
					id: 5,
					title: '最新款女神必备长裤粉色',
					img: 'img2.png',
					tag: '华侨城服装大厦',
					price: 299,
					o_price: 368,
					sold: 356
				},
				
			]
		}
  },
  computed: {

  },
  methods: {

  },
  mounted () {

  }
}
</script>

<style scoped lang="scss">
	@import '~styles/theme';
	.page{
		background-color: #fff;
	}
	.page::v-deep .van-nav-bar{
		z-index: 999;
		background-color: $theme_color;
		.van-nav-bar__title{
			color: #fff;
		}
		.van-icon{
			color: #fff;
			font-size: 20px;
		}
	}
	.content::v-deep .van-tabs__nav{
		background-color: $theme_color;
		.van-tab__text{
			color: #fff;
			font-size: 14px;
		}
		.van-tabs__line{
			background-color: #fff;
			width: 30px;
		}
	}
	.content{
		.banner{
			position: relative;;
			.nav_bg{
				width: 100%;
				background-color: $theme_color;
				height: 100px;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
			}
			.swipe{
				position: relative;
				width: 350px;
				margin-left: 13px;
				z-index: 2;
				padding-top: 20px;
				border-radius: 10px;
				.s_item {
					width: 350px;
					height: 165px;
					object-fit: cover;
					border-radius: 10px;
					img{
						width: 350px;
						height: 165px;
						object-fit: cover;
						border-radius: 10px;
					}
				}
			}
		}
		.comm_content{
			margin-top: 10px;
			margin-bottom: 20px;
			// margin-top: 10px;
			width: calc(100% - 24px);
			margin-left: 12px;
			ul{
				display: flex;
				flex-wrap: wrap;
				li{
					width: 50%;
					position: relative;
					&:not(:nth-child(2n)):not(:nth-last-child(1))::after{
						content: '';
						position: absolute;
						right: 0;
						top: 0;
						width: 1px;
						height: 100%;
						background-color: #eee;
					}
					&:not(:nth-child(1)):not(:nth-child(2))::before{
						content: '';
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 1px;
						background-color: #eee;
					}
					.t{
						display: flex;
						justify-content: center;
						align-items: center;
						padding-top: 8px;
						margin-bottom: 10px;
						img{
							text-align: center;
							width: 167px;
							height: 167px;
							object-fit: cover;
							display: block;
						}
					}
					.b{
						padding-bottom: 10px;
						.title{
							font-weight: bold;
							width: 167px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							margin-bottom: 10px;
						}
						.mess{
							padding: 4px 5px;
							display: flex;
							justify-content: space-between;
							align-items: center;
							.price{
								span{
									color: $font_main_color;
									font-weight: bold;
									margin-right: 10px;
								}
								del{
									color: #aaa;
								}
							}
							.btn{
								button{
									border: 1px $font_main_color solid;
									border-radius: 4px;
									background-color: none;
									color: $font_main_color;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
